<template>
  <div id="msg-management">
    <el-row>
      <div class="pane-title">
        <span class="module-name">消息管理</span>
        <el-button type="success" size="small" @click="handleClickAdd()">新增</el-button>
      </div>
    </el-row>
    <el-row :style="{height:'100%'}">
      <el-table :data="messageList" style="width: 100%">
        <el-table-column prop="smiId" label="消息ID" width="150"></el-table-column>
        <el-table-column prop="titleImg" label="标题图片" width="150"></el-table-column>
        <el-table-column prop="title" label="主标题" width="150"></el-table-column>
        <el-table-column prop="subTitle" label="副标题" width="150"></el-table-column>
        <el-table-column prop="content" label="内容" width="150"></el-table-column>
        <el-table-column prop="msgType" label="消息类型" :formatter="formatMsgType" width="150"></el-table-column>
        <el-table-column prop="pushType" label="推送类型" :formatter="formatPushType" width="150"></el-table-column>
        <el-table-column prop="linkType" label="链接类型" :formatter="formatLinkType" width="150"></el-table-column>
        <el-table-column prop="contentUrl" label="链接值" width="150"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="100"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleClickEditor(scope.row)" size="small">编辑</el-button>
            <el-button type="danger" @click="handleClickDelete(scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="pageTotal"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-row>
    <dia title="提示" :visible.sync="dialogVisible">
      <el-form :model="messageForm" ref="messageForm" label-width="80px" :rules="roleRules">
        <el-form-item label="消息类型" prop="msgType">
          <el-select v-model="messageForm.msgType" value-key="msgType" :readonly="isAdd" placeholder="请选择">
            <el-option label="系统消息" :value="1"></el-option>
            <el-option label="活动消息" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="messageForm.title"></el-input>
        </el-form-item>
        <el-form-item label="副标题" prop="subTitle">
          <el-input v-model="messageForm.subTitle"></el-input>
        </el-form-item>
        <el-form-item label="标题图片" prop="titleImg">
          <el-input v-model="messageForm.titleImg"></el-input>
        </el-form-item>
        <el-form-item label="推送类型" prop="pushType">
          <el-select v-model="messageForm.pushType" value-key="pushType" :readonly="isAdd" placeholder="请选择">
            <el-option label="不推送" :value="0"></el-option>
            <el-option label="所有人" :value="1"></el-option>
            <el-option label="代理商" :value="2"></el-option>
            <el-option label="普通用户" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接类型" prop="linkType">
          <el-select v-model="messageForm.linkType" value-key="linkType" placeholder="请选择">
            <el-option label="URL" value="url"></el-option>
            <el-option label="商品ID" value="goodId"></el-option>
            <el-option label="活动ID" value="actionId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接值" prop="contentUrl">
          <el-input v-model="messageForm.contentUrl"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" prop="content">
          <el-input v-model="messageForm.content"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer">
        <el-button type="primary" @click="sureMessageClick">保 存</el-button>
        <el-button @click="cancelMessageClick">取 消</el-button>
      </span>
    </dia>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import * as validators from "@/utils/validators";
import * as message from "@/constants/message";
import { FORMAT_DATE_YYYY_MM_DD } from "@/constants/constants";
import { mapGetters, mapActions } from "vuex";
import MessageApi from "@/api/message/message";

export default {
  data() {
    return {
      dialogVisible: false,
      isAdd:false,
      messageForm: {
        msgType: "",
        title: "",
        subTitle: "",
        titleImg: "",
        pushType: "",
        linkType: "",
        contentUrl: "",
        content: ""
      },
      messageList: [],
      page: {
        pageNo: 0,
        pageSize: 20
      },
      pageTotal: 0,
      roleRules: {
        title: [
          {
            required: true,
            //validator: validators.checkTitle,
            message: "请输入标题",
            trigger: "blur"
          }
        ],
        content: [
          {
            required: true,
            message: "请输入消息内容",
            trigger: "blur"
          }
        ]
      }
    };
  },
  components: {
    dia: Dialog
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.listMessage();
    },
    formatMsgType(row, column, cellValue) {
     return cellValue == 1?"系统消息":"活动消息"
    },
    formatPushType(row, column, cellValue) {
      if (cellValue == '0'){
        return "不推送"
      }else if (cellValue == '1'){
        return "所有人"
      }else if (cellValue == '2'){
        return "代理商"
      }else if (cellValue == '3'){
        return "普通用户"
      }
    },
    formatLinkType(row, column, cellValue) {
      if (cellValue == 'url'){
        return "URL"
      }else if (cellValue == 'goodId'){
        return "商品ID"
      }else if (cellValue == 'actionId'){
        return "活动ID"
      }
    },
    formatDateTime(row, column, cellValue) {
      let _this = this;
      return _this.$Utils.formatDate(cellValue,'yyyy-MM-dd hh:mm:ss')
    },
    handleCurrentChange(val) {
      this.page.pageNo = val;
      this.listMessage();
    },
    handleClickAdd() {
      let _this = this;
      _this.$Utils.clearData(_this.messageForm);
      delete  _this.messageForm.smiId;
      _this.dialogVisible = true;
      _this.isAdd = false;
    },
    handleClickEditor(val) {
      let _this = this;
      this.$Utils.bindingBean(this.messageForm, val);
      this.messageForm.smiId = val.smiId;
      //debugger
      _this.dialogVisible = true;
      _this.isAdd = true;
    },
    handleClickDelete(val) {
      let _this = this;
      _this
        .$confirm(message.MSG_CONFIRM_DELETE, message.TITLE_PROMPT, {})
        .then(() => {
          MessageApi.deleteMesg({smiId: val.smiId})
            .then(res => {
              _this.listMessage();
            })
        });
    },
    listMessage() {
      let _this = this;
      this.$emit('show-loading',true);
      MessageApi.listMesgs(this.page)
        .then(res => {
          _this.messageList = res.data.list;
          _this.pageTotal = res.data.total;
          _this.$emit('show-loading',false);
        })
        .catch(error => {
          console.error(error);
          _this.$emit('show-loading',false);
        });
    },
    removeChildren(regions){
       for(let i= 0,len = regions.length;i<len;i++){
            if(regions[i].children.length === 0){
                delete regions[i].children;
            }else {
              this.removeChildren(regions[i].children)
            }
          }
    },
    sureMessageClick() {
      let _this = this;
      _this.$refs.messageForm.validate(valid => {
        if (valid) {
          _this
            .$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
            .then(() => {
              //debugger
              if (_this.messageForm.smiId) {
                _this.alterMessage();
              } else {
                _this.addMessage();
              }
            });
        }
      });
    },
    alterMessage(){
       let _this = this;
      MessageApi.editMesg(this.messageForm)
        .then(data => {
          this.dialogVisible = false;
          _this.listMessage();
          _this.$notify.success({
            title: message.TITLE_SUCCESS,
            message: message.MSG_ALTER_SUCCESS
          });
        });
    },
    addMessage() {
      let _this = this;
      MessageApi.addMesg(this.messageForm)
        .then(data => {
          this.dialogVisible = false;
          _this.listMessage();
          _this.$notify.success({
            title: message.TITLE_SUCCESS,
            message: message.MSG_ALTER_SUCCESS
          });
        });
    },
    cancelMessageClick() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" src="@/assets/css/views/content.scss" scope>
</style>
